<template>
    <div class="entrance-container">
        <div class="particleGround"></div>
        <div class="container-wrapper">
            <div class="sign">
                <router-link to="/entrance/sign_in" :class="{'router-link-active' : $route.path === '/demo'}">登录</router-link>
                <span>·</span>
                <router-link to="/entrance/sign_up">注册</router-link>
            </div>
            <div class="sign-in">
                <div>
                    <span class="icon_phone"><i class="fa fa-mobile"></i></span>
                    <input type="text" class="telephone" placeholder="手机号">
                </div>
                <div>
                    <span class="icon_lock"><i class="fa fa-lock"></i></span>
                    <span class="icon-eye"><i class="fa fa-eye"></i></span>
                    <input type="password" class="password" placeholder="密码">
                </div>
                <button type="button" ref="btn">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
    import { ParticleGround } from '@/assets/lib/particleground/particleground'
    export default {
        created(){},
        mounted(){
//            var operator = ParticleGround(document.querySelector('.particleGround'),{
//                dotColor: '#fff',   //设置粒子的颜色
//                lineColor: '#fff',  //设置线的颜色
//                dotOpacity: 0.2,    //设置粒子的透明度
//                lineOpacity: 0.2,   //设置线的透明度
//                minSpeedX: 0.4,     //设置x轴方向的最小移动速度
//                maxSpeedX: 1,       //设置x轴方向的最大移动速度
//                minSpeedY:0.4,      //设置y轴方向的最小移动速度
//                maxSpeedY:1,        //设置y轴方向的最大移动速度
//                parallax: false,    //指定粒子是否跟随鼠标
//                directionX: "center",   //指定粒子x轴的走向
//                directionY: "center",   //指定粒子y轴的走向
//                dotMinSize: 3,      //如果想让粒子大小相同,只需dotMinSize和dotMaxSize相同即可
//                dotMaxSize: 20,
//                lineWidth:1,         //设置线的宽度
//                curvedLines:false,  //设置线是否弯曲,前提是parallax为true
//                density:25000,       //设置粒子密度,值越大,密度越小
//                clickAddDot:false,   //设置是否添加点击画布添加粒子事件
//                addDotNumber:2,     //设置每次点击添加的粒子个数
//                dotShape:"heart",      //设置粒子的形状  可选址:circle edge(正方形) triangle(三角形) polygon(多边形) star
//                sideNumber:5,        //对polygon,star才有效
//                proximity:100        //在指定的范围内,粒子之间产生会产生连线
//            })
//            this.$store.commit('setParticleGround',operator)
        },
        methods : {
            show(){
                alert(1)
            }
        }
    }
</script>

<style scoped lang="less">
    .entrance-container{
        width: 100vw;
        height: 100vh;
        position:relative;
        .particleGround {
              background-image: linear-gradient(135deg,#79f1a4, #0e6fc6);
              position: fixed;
              width: 100vw;
              height: 100vh;
              z-index: -1;
        }
        .container-wrapper{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 400px;
            max-height: 350px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,.2);
            padding: 20px;
            .sign{
                width:100%;
                font-weight:700;
                font-size:18px;
                text-align: center;
                margin-bottom:30px;
                a{
                    color:#969696;
                    display: inline-block;
                    width: 56px;
                    height: 40px;
                    line-height:40px;
                }
                a:hover{
                    border-bottom:2px solid #ea6f5a;
                }
                a.router-link-active{
                    color:#ea6f5a;
                    border-bottom:2px solid #ea6f5a;
                }
                span{
                    margin: 0 4px;
                }
            }
            input{
                border: 1px solid #c8c8c8;
                border-top: 0;
                width: 100%;
                height: 50px;
                padding: 4px 12px 4px 35px;
                border-radius: 0;
                background-color: hsla(0,0%,71%,.1);
            }
            button{
                margin-top: 20px;
                width: 100%;
                padding: 9px 18px;
                font-size: 18px;
                border-radius: 25px;
                color: #fff;
                display: block;
            }
        }
    }
    .sign-in{
        width:100%;
        div{
            position: relative;
            span{
                position: absolute;
                line-height:50px;
                font-size:20px;
                color:#969696;
                &.icon_phone{
                     left:14px;
                     font-size:28px;
                 }
                &.icon_lock{
                     left:14px;
                 }
                &.icon-eye{
                     right:10px;
                 }
            }
        }
        input{
            &.telephone{
                 border-top: 1px solid #c8c8c8;
                 border-top-left-radius: 4px;
                 border-top-right-radius: 4px;
             }
            &.password{
                 border-bottom-left-radius: 4px;
                 border-bottom-right-radius: 4px;
             }
        }
        button{
            background: #3194d0;
        }
    }
    @media screen and (min-width: 415px){
        .entrance-container {
            .container-wrapper{
                padding: 50px;
                .sign{
                    span{
                        margin: 0 14px;
                    }
                }
            }
        }
    }
</style>
